<script setup>
import { ref } from 'vue'
import config from '@/assets/js/config'
import { useUserStore } from '@/stores/index'
import { checkImgExists } from '@/assets/js/utils'
const userStore = useUserStore()
const imageStatus = ref(false)
const uploadUrl = config.baseApi + '/upload/upload_logo'
const handleAvatarSuccess = (res) => {
    if (res.data) {
        userStore.setSystemInfo({
            ...userStore.systemInfo,
            logo: res.data,
        })
    }
}
// 验证图片有效
function inspectImage(url) {
    checkImgExists(url).then(() => {
        imageStatus.value = true
    })
}

if (userStore.systemInfo) {
    inspectImage(config.imgUrl + userStore.systemInfo.logo)
}
</script>
<template>
    <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        accept="image/*"
        :on-success="handleAvatarSuccess"
    >
        <el-tooltip
            content="点击上传"
            placement="bottom"
            effect="light"
            :show-arrow="false"
            :offset="2"
        >
            <img
                v-if="userStore.systemInfo.logo !== '' && imageStatus"
                :src="config.imgUrl + userStore.systemInfo.logo"
                class="avatar"
            />
            <img v-else src="@/assets/images/logo.png" alt="" />
        </el-tooltip>
    </el-upload>
</template>

<style lang="scss" scoped>
img {
    width: 20px;
    height: 20px;
}
.avatar-uploader {
    height: 20px !important;
}
</style>
